<template>
  <div class="z-40 w-full px-4 py-3 shadow-lg bg-main-500 absolute top-0">
    <div class="flex w-full items-center">
      <n-icon v-if="back" size="24" :color="char600" @click="navBack">
        <chevron-back-sharp />
      </n-icon>
      <slot name="prefix" />
      <img v-if="tenant" :src="logo" class="w-12 h-12 object-fill">
      <div class="text-base font-bold p-2 cursor-pointer" @click="navBack">{{ value }}</div>
      <div class="grow">
        <slot name="suffix" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ChevronBackSharp } from '@vicons/ionicons5'
import { NIcon } from 'naive-ui'
import { navBack } from '../../shared/client/window'
import { char600 } from '../../shared/theme/color'
import { reqQuerySettings } from '../../services/setting/setting.def'
import { axiosReq } from '../../shared/client/axios'
import { ref } from 'vue'

const logo = ref('')
querySettings()
async function querySettings() {
  const res = await reqQuerySettings(axiosReq, 'TENANT')
  logo.value = res.find(x => x.name === 'LOGO')?.data || ''
}

defineProps({
  value: {
    type: String,
    required: true
  },

  back: {
    type: Boolean,
    required: false,
    default: true
  },

  tenant: {
    type: Boolean,
    required: false,
    default: false
  }
})
</script>

<style>
</style>
